<script></script>
<template>
  <nav class="W">
    <div class="logo">
    </div>
    <div class="nav-title">
      <ul>
        <li><a href="#">Xiaomi手机</a></li>
        <li><a href="#">Redmi红米</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">服务中心</a></li>
        <li><a href="#">社区</a></li>
      </ul>
    </div>
    <div class="search">
      <input type="text" placeholder="小米">
      <span> 
        <i class="iconfont icon-sousu"></i>
      </span>
    </div>
  </nav>

</template>
<style>
nav {
  height: 80px;
  position: relative;
  margin-top: 20px !important;
  
}
nav .logo {
  float: left;
  width: 60px;
  height: 60px;
  background: url(../images/logo-mi2.png);
  background-size: 60px, 60px;
}
nav .search {
  float: right;
  height: 50px;
}
nav .search input{
  width: 244px; 
  height: 50px;
  padding-left: 10px;
  vertical-align: middle;
  border: 1px solid #e4e4e4;
  transition: all .3s linear;
}
nav .search span {
  float: right;
  width: 50px;
  height: 50px;
  border-left: 0;
  cursor: pointer;
}
nav .search span i {
  display: inline-block;
  text-align: center;
  line-height: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid #e4e4e4;
  transition: all .3s linear;
  font-size: 16px;
  font-weight: 600;
}
nav .search span:hover {
  background-color: #ff6a00;
}
nav .search:hover input,
nav .search:hover span i{
  border: 1px solid rgb(62, 62, 62);
}
nav .search span i:hover {
  color: #ffffff;
}
.nav-title {
  position: absolute;
  top: 20px;
  left: 15%;
}
.nav-title ul li {
  float: left;
  padding: 0 10px;
}
.nav-title ul li a {
  color: #333333; 
}
.nav-title ul li a:hover {
  color: #ff6a00;
}

</style>